<template>
  <view class="good-item" v-if="goodItem">
    <!--  商品名称  -->
    <view class="item-name">{{ goodItem.c_name }}</view>
    <!--  编号  -->
    <view class="item-no">编号：{{ goodItem.c_gcode }}</view>
    <!--  分割线  -->
    <eui-line color="#F2F3F5"></eui-line>
    <!--  库存数据  -->
    <view class="stock-content">
      <view class="top flex-row">
        <view class="item">合理库存：{{ goodItem.c_dnlmt_number }}</view>
        <view class="item">系统库存：{{ goodItem.c_number }}</view>
        <view class="item">在途库存：{{ goodItem.c_onway }}</view>
      </view>
      <view class="bottom flex-row">
        <view class="item">昨：{{ 1 }}</view>
        <view class="item">均：{{ 1 }}</view>
        <view class="item">环：{{ 1 }}</view>
      </view>
    </view>
    <view class="handle-count flex-row">
      <eui-inputnumber
          :value="goodItem.c_qtty"
          :styletype="true"
          placeholder="输入调拨数"
          jldw='箱'
          @input="changeValue"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';
import { useReceiptStore } from '@/store/useReceiptStore';
import { storeToRefs } from 'pinia';

const receiptStore = useReceiptStore();
const { cartList } = storeToRefs(receiptStore);

interface GoodsItem {
  c_gcode: string;
  c_name: string;
  c_qtty?: number;
  c_dnlmt_number: number;
  c_number: number;
  c_onway: number;
  [key: string]: any;
}

const props = defineProps<{
  goodItem: GoodsItem;
}>();

const changeValue = (e: { detail: { value: number } }) => {
  const newQtty = e.detail.value;
  props.goodItem.c_qtty = newQtty;
  
  // 检查商品是否已在购物车中
  const existingItem = cartList.value.find(item => item.c_gcode === props.goodItem.c_gcode);
  
  if (existingItem) {
    // 如果商品已存在，更新数量
    receiptStore.updateCartItemQtty(props.goodItem.c_gcode, newQtty);
  } else {
    // 如果商品不存在，添加到购物车
    receiptStore.addToCart({
      ...props.goodItem,
      c_qtty: newQtty
    });
  }
  
  console.log('props.goodItem', props.goodItem);
}

const addGoods = () => {
  uni.navigateTo({
    url: '/pages/BusiViews/StoreTransfer/detail',
  })
}
</script>

<style scoped lang="scss">
.good-item {
  width: 100%;
  padding: 30rpx 20rpx;
  margin-bottom: 20rpx;
  background: #ffffff;
  border-radius: 24rpx;
  box-sizing: border-box;

  .item-name {
    font-size: 28rpx;
    text-align: left;
    color: #222222;
    line-height: 40rpx;
  }

  .item-no {
    margin: 10rpx 0 20rpx;
    font-size: 26rpx;
    text-align: left;
    color: #999999;
    line-height: 36rpx;

    .no-text {
      display: inline-block;
      margin-right: 40rpx;
    }
  }

  .stock-content {
    .top {
      margin: 20rpx 0 10rpx;

      .item {
        &:last-child {
          margin: 0;
        }

        & {
          margin-right: 10rpx;
          padding: 0 15rpx;
          background: #f2f3f5;
          border-radius: 10rpx;
          font-size: 24rpx;
          text-align: left;
          color: #666666;
          line-height: 54rpx;
        }

      }
    }

    .bottom {
      .item {
        position: relative;

        &:not(:last-child) {
          padding-right: 40rpx;

          &:after {
            content: '';
            position: absolute;
            top: 10rpx;
            right: 19rpx;
            width: 2rpx;
            height: 20rpx;
            background: #dcdfe6;
          }
        }

        & {
          font-size: 24rpx;
          text-align: left;
          color: #666666;
          line-height: 40rpx;
        }

      }
    }
  }

  .handle-count {
    justify-content: flex-end;
    align-items: center;
  }
}
</style>
